
<%--
    Document   : signUp
    Created on : Sep 14, 2011, 6:54:50 PM
    Author     : Phuong Giang
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Sign Up</title>
        <link type="text/css" rel="stylesheet" href="styles/bootstrap-1.2.0.min.css"/>
        <script src="scripts/jquery-1.6.3.min.js" type="text/javascript" ></script>
        <style>
            fieldset > div, fieldset > legend {
                margin: auto;
                padding-left: 25% !important;
            }
        </style>
    </head>
    <body>
        <h1>Sign Up</h1>

        <form action="LoginController" method="POST" name="signup">
            <fieldset>
                <legend>Sign up</legend>
                <div id="server-error" class="clearfix error hidden">
                    <div> ${sessionScope["register-message"]} </div>
                </div>
                <div class="clearfix">
                    <label for="username">Username</label>
                    <div class="input">
                        <input class="xlarge" id="username" type="text" name="txtUsername" value="" />
                        <span class="help-inline hidden">Required at least 6 characters (A-Z,a-z)</span>
                        <span class="help-inline unavailable hidden">Username is not available</span>
                    </div>
                </div>

                <div class="clearfix">
                    <label for="password">Password</label>
                    <div class="input">
                        <input class="xlarge" id="password" type="password" name="txtPassword" value="" />
                        <span class="help-inline hidden">Required at least 6 characters</span>
                    </div>
                </div>

                <div class="clearfix">
                    <label for="cPassword">Password confirm</label>
                    <div class="input">
                        <input class="xlarge" id="cPassword" type="password" name="txtCPassword" value="" />
                        <span class="help-inline hidden">Password does not match</span>
                    </div>
                </div>

                <div class="clearfix">
                    <label for="displayName">Display Name</label>
                    <div class="input">
                        <input id="displayName" class="xlarge" type="text" name="txtDisplayName" value="" />
                        <span class="help-inline hidden">Required</span>
                    </div>
                </div>

                <div class="actions">
                    <input type="submit" value="Register" name="btnAction" class="btn primary"/>
                    <input type="reset" value="Reset" name="btnReset" class="btn" />
                </div>
            </fieldset>

            <script type="text/javascript" >
                if($.trim($("#server-error").text()) != "") {
                    $("#server-error").removeClass("hidden");
                }
                var activateError = function (input, activate, classname) {
                    var helper = classname?input.siblings(classname):input.next(".help-inline"),
                    parent = input.parents("div.clearfix");
                    
                    if(activate) {
                        input.addClass("error");
                        helper.removeClass("hidden");
                        parent.addClass("error");
                        return false;
                    } else {
                        input.removeClass("error");
                        helper.addClass("hidden");
                        if(parent.find(".error").length) {
                            parent.removeClass("error");
                        }
                        
                        return true;
                    }
                };

                var requiredField = function(fieldID, param) {
                    var input = $("#"+fieldID);
                    var error ;
                    if(typeof param == "number") {
                        var len = param || 1;
                        error = input.val().length < len;
                    } else {
                        var regx = param;
                        error = !input.val().match(regx);
                    }

                    return activateError (input, error);
                };

                var matchedField = function(fieldID, matchedID) {
                    var input = $("#"+fieldID), matched = $("#"+matchedID);
                    return activateError (input, input.val() !== matched.val());
                };

                
                var availableUsername = function (fieldID) {
                    var input = $("#"+fieldID);
                    input.data("check", "unchecked");
                    
                    $.getJSON("LoginController?btnAction=usernameAvailable", {
                        username: input.val()
                    }, function (data) {
                        activateError(input, !data.available,".unavailable" );
                        if(!data.available) {
                            input.data("check","unavailable");
                        } else {
                            input.data("check","available");
                        }
                        
                        
                    })
                }

                var validateForm = function() {
                    var u = requiredField("username", /^[A-Za-z0-9]{6,}$/g),
                    p = requiredField("password", 6),
                    c =  matchedField("cPassword", "password") ,
                    d = requiredField("displayName"),
                    a = $("#username").data("check") == "available";

                    return (u && p && c && d && a);
                    
                }
                $("#username").blur(function () {
                    availableUsername("username");
                });

                signup.onsubmit = validateForm;
                signup.onreset = function () {
                    $(".error").removeClass("error");
                    $(".help-inline").addClass("hidden");
                };
            </script>

        </form>
    </body>
</html>

